const xhr5=new XMLHttpRequest()
const picture=document.querySelector('.item-picture')
const name=document.querySelector('.item-box-name')
const price=document.querySelector('.item-box-price')
const page=document.querySelector('.page-main-shopping')
const totalprice=document.querySelector('.total-price-main')
var checkbox=document.querySelector('.check-box-style')
var total=0;
xhr5.onreadystatechange = function() {HTMLAllCollection
    if (xhr5.readyState === 4 && xhr5.status === 200) {
        const {data:res} =JSON.parse(xhr5.responseText)
        console.log(res)
        for (var i=0;i<res.records.length;i++){
            const div=document.createElement('div')
            div.className='item-box'
            page.appendChild(div)

            const check=document.createElement('div')
            check.className='check'
            div.appendChild(check)

            const input=document.createElement('input')
            input.className='check-box'
            input.type='checkbox'
            check.appendChild(input)

            const itempicture=document.createElement('div')
            itempicture.className='item-picture'
            div.appendChild(itempicture)

            const img=document.createElement('img')
            img.className='item-box-img'
            itempicture.appendChild(img)
            img.src=res.records[i].product_picture

            const itemname=document.createElement('div')
            itemname.className='item-name'
            div.appendChild(itemname)
            itemname.innerHTML=res.records[i].product_name

            const itemprice=document.createElement('div')
            itemprice.className='item-price'
            div.appendChild(itemprice)
            itemprice.innerHTML=res.records[i].product_price+'元'


            const itemnumber=document.createElement('div')
            itemnumber.className='item-number'
            div.appendChild(itemnumber)
            const leftdiv=document.createElement('div')
            leftdiv.onclick=function () {
                if (inputnub.value>=2){
                    inputnub.value--;
                }
                else {
                    alert("商品数量不能为0")
                }
            }
            leftdiv.style.cssText='float:left;width:38px;height:38px;display: flex;justify-content:center;align-items:center;border-left: 1px solid;\n' +
                '    border-top: 1px solid;\n' +
                '    border-bottom: 1px solid;'
            itemnumber.appendChild(leftdiv)
            const leftimg=document.createElement('img')
            leftimg.src="public/imgs/jian.png"
            leftdiv.appendChild(leftimg)

            const inputnub=document.createElement('input')
            inputnub.id='inputnub'
            inputnub.style.cssText="width:72px;height:38px;border:1px solid; text-align: center;"
            inputnub.value=1
            itemnumber.appendChild(inputnub)

            const rightdiv=document.createElement('div')
            rightdiv.onclick=function () {
                inputnub.value++;
            }
            rightdiv.className='rightdiv'
            rightdiv.style.cssText='float:left;width:38px;height:38px;display: flex;justify-content:center;align-items:center;border-right: 1px solid;\n' +
                '    border-top: 1px solid;\n' +
                '    border-bottom: 1px solid;'
            itemnumber.appendChild(rightdiv)
            const rightimg=document.createElement('img')
            rightimg.src="public/imgs/jia.png"
            rightdiv.appendChild(rightimg)

            const itemtotal=document.createElement('div')
            itemtotal.className='item-total'
            div.appendChild(itemtotal)
            itemtotal.innerHTML=res.records[i].product_price+'元'

            const itemaction=document.createElement('div')
            itemaction.className='item-action'
            div.appendChild(itemaction)

            const itemremove=document.createElement('button')
            itemremove.className='item-remove'
            itemremove.innerText='x'
            itemaction.appendChild(itemremove)

            var othercheck=document.querySelectorAll('.check-box')
            checkbox.onclick=function (){
                for (var i=0;i<othercheck.length;i++){
                    if (checkbox.checked==true){
                        othercheck[i].checked=true
                        totalprice.innerHTML=(total+=res.records[i].product_price)
                    }
                    else {
                        othercheck[i].checked=false
                        totalprice.innerHTML=''
                    }
                }

            }


            const pid=res.records[i].order_id
            itemremove.onclick=function (){
                alert("确定删除该商品吗？")
                const xhr6=new XMLHttpRequest()
                xhr6.open('DELETE','http://43.138.138.11:1110/api/order/'+pid,false)
                xhr6.send()
                console.log(xhr6.responseText)
                location.href='shoppingcar.html'
            }
        }
    }
}
const page1=document.querySelector('.page-1')
const page2=document.querySelector('.page-2')
const id4 = localStorage.getItem('product_id2')
const name5=localStorage.getItem('username')
const userid=localStorage.getItem('userid')
xhr5.open('GEt','http://43.138.138.11:1110/api/order/'+userid+'/'+1+'/'+5,true)
xhr5.send(null)
